<template>
  <div style="width: 100%;height: 160px;background-color: white;">
      <div class="homePage1">
        <ul class="homePage1-left">
          <li>请登录</li>
          <li>免费注册</li>
          <li>服务热线:027-8888-888</li>
        </ul>
        <ul class="homePage1-right">
          <li><button>使用申请</button></li>
          <li>关于我们</li>
          <li>帮助中心</li>
          <li>个人中心</li>
        </ul>
      </div>
      <div class="homePage2">
        <div class="homePage2-logo">
          <img src="/imgs/homepage1.jpg" alt="homepage">
          <div class="logo-besides">
            <p style="font-size: 22px;font-weight: bold;">吉材网</p>
            <p style="font-weight: bold; font-size: 12px;">www.juruijiyi.XX.com</p>
          </div>
        </div>
      </div>
  </div>
  <div style="width: 80%;height: 50px;line-height: 50px;padding-left: 5px;font-weight: bold">个人中心</div>
  <div style="width: 80%;height: 150px;background-color: white;position: relative;">
      <div class="person-logo">
        <a-avatar :size="64">
            <template #icon><UserOutlined /></template>
        </a-avatar>
        <div style="padding-left: 20px;">
            <p style="font-size: 18px;font-weight: bold;margin-top: 20px;margin-bottom: 6px;">XXX公司</p>
            <p>积分：0分</p>
        </div>
      </div>
      <div style="position: absolute;top: 35px;right: 40px;height: 80px">
        <button style="background-color: orange;outline: none;border: 0;padding: 6px 20px 6px 20px;color: white;">发布商品市场价</button>
        <p style="position: absolute;right: 0;bottom: -8px;font-size: 14px;color: blue;">下载模板</p>
      </div>
  </div>
  <div style="width: 80%;height: 50px;line-height: 50px;padding-left: 5px;font-weight: bold">我的收藏</div>
  <div style="width: 80%;height: 400px;background-color: white;margin-bottom: 200px;padding-left: 15px;padding-right: 15px;">
    <a-tabs v-model:activeKey="activeKey" :tabBarGutter="70" class="tab" style="word-break:break-all">
    <a-tab-pane key="1" tab="吉市价"><div>
      <a-table :columns="columns" :data-source="data" bordered>
    <!-- <template #name="{ text }">
      <a>{{ text }}</a>
    </template> -->
    <!-- <template #customTitle>
      <span>
        供应商
      </span>
    </template> -->
    <!-- <template #tags="{ text: tags }">
      <span>
        <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
        >
          {{ tag.toUpperCase() }}
        </a-tag>
      </span>
    </template> -->
    <!-- <template #action="{ record }">
      <span>
        <a>Invite 一 {{ record.name }}</a>
        <a-divider type="vertical" />
        <a>Delete</a>
        <a-divider type="vertical" />
        <a class="ant-dropdown-link">
          More actions
          <down-outlined />
        </a>
      </span>
    </template> -->
  </a-table>
    </div></a-tab-pane>
    <a-tab-pane key="2" tab="吉品汇" force-render><div>
      <a-table :columns="columns1" :data-source="data1" bordered></a-table>
    </div></a-tab-pane>
    <template #tabBarExtraContent>
      <a-button>Extra Action</a-button>
    </template>
    </a-tabs>
  </div>
  <div style="width: 100%;height: 270px;background-color: rgb(0, 16, 64);"></div>
</template>

<script lang="ts">

import {UserOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
const columns = [
  {
    title:'供应商',
    dataIndex: 'supplier',
    key: 'supplier',
    ellipsis: true,
    width:160,
    align:'center',
    // sort:true
    // slots: { title: 'customTitle', customRender: 'supplier' },
  },
  {
    title: '产品说明',
    dataIndex: 'product',
    key: 'product',
    ellipsis: true,
    width:220,
    align:'center',
  },
  {
    title: '品牌',
    dataIndex: 'brand',
    key: 'brand',
    ellipsis: true,
    width:65,
    align:'center',
  },
  {
    title: '单位',
    key: 'unit',
    dataIndex: 'unit',
    width:65,
    align:'center',
    // slots: { customRender: 'unit' },
  },
  {
    title: '含税工程价',
    dataIndex:'fprice',
    key: 'fprice',
    width:110,
    align:'center',
  },
  {
    title: '历史价',
    key: 'hprice',
    dataIndex:'hprice',
    width:80,
    align:'center',
    // slots: { customRender: 'hprice' },
  },
  {
    title: '含税市场价',
    key: 'mprice',
    dataIndex:'mprice',
    width:110,
    align:'center',
    // slots: { customRender: 'mprice' },
  },
  {
    title: '税率',
    key: 'tax',
    dataIndex:'tax',
    width:70,
    align:'center',
    // slots: { customRender: 'tax' },
  },
  {
    title: '报价时间',
    key: 'qdate',
    dataIndex:'qdate',
    align:'center',
    // slots: { customRender: 'qdate' },
  },
  {
    title: '报价单',
    key: 'quotation',
    dataIndex:'quotation',
    width:80,
    align:'center',
    // slots: { customRender: 'quotation' },
  },
  {
    title: '操作',
    key: 'action',
    dataIndex:'action',
    width:65,
    align:'center',
    // slots: { customRender: 'action' },
  }
];
const columns1=[{
    title: 'LOGO',
    key: 'logo',
    dataIndex:'logo',
    align:'center',
},{
    title: '产品手册名称',
    key: 'name',
    dataIndex:'name',
    align:'center',
},{
    title: '产品描述',
    key: 'dereaction',
    dataIndex:'dereaction',
    align:'center',
},{
    title: '发布公司',
    key: 'company',
    dataIndex:'company',
    align:'center',
},{
    title: '操作',
    key: 'action',
    dataIndex:'action',
    align:'center',
}
];
const data = [
  {
    key: '1',
    supplier: '武汉市-武汉XX公司',
    product: '产品说明描述产品说明描述产品说明描述',
    brand: '沙钢',
    unit: '支',
    fprice:70.00,
    hprice:10.00,
    mprice:20.00,
    tax:'13%',
    qdate:'2022-02-02',
    quotation:12,
    action:'查看'
  }
];
const data1=[
  {
    key:'1',
    logo:'ToTo',
    name:'TOTO卫浴产品手册',
    dereaction:'卫生陶瓷系列五金配件',
    company:'XX市洁具营销中心',
    action:'查看'
  }
]
export default defineComponent({
  setup() {
    return {
      data,
      data1,
      columns,
      columns1,
      activeKey: ref('1'),
    };
  },
  components: {
    UserOutlined,
  },
});
</script>

<style>
body{
    background-color: #f2f2f2;
}
.homePage1{
      width: 80%;
      height: 30px;
      margin: auto;
    }
    .homePage1 li{
      list-style: none;
      height: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 20px;
      font-weight: 500;
    }
    .homePage1-left li{
      float: left;
    }
    .homePage1-right li{
      float: right;
    }
    .homePage1-right button{
      padding: 6px;
      background-color: white;
      border: 0;
      border: 3px solid orange;
      color: orange;
      border-radius: 6px;
    }
    .homePage2{
      width: 70%;
      height: 60px;
      margin: auto;
      margin-top: 35px;
      display: flex;
    }
    .homePage2-logo{
      width: 185px;
      height: 100%;
    }
    .homePage2-logo img{
      width: 62px;
      height: 62px;
    }
    .logo-besides{
      float: right;
      padding-top: 4px;
      color: orange;
    }
    .logo-besides p{
      margin: 0;
    }
    .person-logo{
        width: 20%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 25px;
    }
    .person-logo p{
        margin: 0;
    }
    .tab .ant-tabs-ink-bar{
      background-color: orange;
    }
    ::v-deep .ant-tabs-tab-active{
      padding: 15px;
      color: orange;
    }
    .tab .ant-tabs-tab{
      padding: 15px;
    }
    .ant-table-thead > tr > th {
      background-color: orange;
    }
</style>